<template>
  <div class="view-combox">
    <div class="subnav2">
      <div class="nav2">
        <ul v-if="modules && modules.length > 0">
          <li v-for="(item,index) in modules" :key="index">
            <a
              href="javascript:void(0)"
              :class="params.type == item.key ? 'cur' : ''"
              @click.stop="selectCate(item.key)"
            >{{item.name}}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="scrollbox">
      <!-- 头部 -->
      <v-header></v-header>
      <div class="dis10"></div>
      <div class="listbox aps8">
        <v-list
          api="system.get_sys_module"
          ref="list"
          cards="1"
          cols="60,300,0,90,120"
          :params="params"
          :hidSearch="true"
        >
          <template slot="search">
            <el-button
              class="operate"
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="edit(params)"
            >新增模块</el-button>&nbsp;&nbsp;&nbsp;
            <el-select v-model="params.union_id" size="small">
              <el-option
                :value="item.union_id"
                :label="item.name"
                v-for="(item, index) in menu"
                :key="index"
              ></el-option>
            </el-select>
            <span class="fr">
              <el-button class="operate" size="small" type="default" @click="refresh">清除缓存</el-button>
            </span>
          </template>
          <template slot="head" slot-scope="props">
            <thead>
              <tr class="tr">
                <th class="c1">图标</th>
                <th>模块名称</th>
                <th>路由</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
          </template>
          <template slot="item" slot-scope="props">
            <tr class="tr">
              <td :style="'cursor:pointer;textIndent:' + props.item.level * 10 + 'px'">
                <i :class="props.item.icon" class="f18 font-blue"></i>
              </td>
              <td
                :style="'cursor:pointer;textIndent:' + props.item.level * 12 + 'px'"
                @click="setBaseInfo(props.item)"
              >
                <router-link to class="f14 font-blue">
                  {{props.item.name}}
                  <span class="font-gray2 f11">({{props.item.sort}})</span>
                </router-link>
              </td>
              <td class="font-gray">{{props.item.path ? props.item.path : '-'}}</td>
              <td>
                <span v-if="props.item.status == 1" class="font-green">显示</span>
                <span v-else class="font-gray">隐藏</span>
              </td>
              <td>
                <el-button
                  size="mini"
                  title="编辑"
                  icon="el-icon-edit"
                  type="primary"
                  circle
                  @click="edit(props.item)"
                ></el-button>
                <el-button
                  size="mini"
                  title="删除"
                  type="default"
                  icon="el-icon-delete"
                  circle
                  @click="del(props.item)"
                ></el-button>
              </td>
            </tr>
          </template>
        </v-list>
      </div>

      <!-- 编辑 -->
      <el-dialog :title="editData.title" :visible.sync="editData.status" width="680px" top="7vh">
        <div class="dialogform">
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            label-width="120px"
            label-position="right"
            class="demo-ruleForm"
          >
            <el-form-item label="上级模块">
              <el-select v-model="form.pid" placeholder="请选择上级模板">
                <el-option :value="0" label="无"></el-option>
                <el-option
                  :style="'textIndent:' + item.level * 2 + 'em'"
                  v-for="(item,index) in editData.cate"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模块名称" prop="name">
              <el-input v-model="form.name" class="w400"></el-input>
            </el-form-item>
            <el-form-item label="路由" prop="path">
              <el-input v-model="form.path" class="w400"></el-input>
            </el-form-item>
            <el-form-item label="图标" prop="icon">
              <el-input v-model="form.icon" class="w400"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model="form.sort" type="number" class="w200"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label prop="inlock">
              <el-button type="primary" @click="save">保 存</el-button>
              <el-button @click="editData.status = false">取 消</el-button>
            </el-form-item>
          </el-form>
          <div class="dis10"></div>
          <div class="edititembox" v-if="editData.id > 0">
            <v-editmore
              ref="actionlist"
              name="API权限"
              api="system.get_sys_module_detail"
              saveapi="system.save_sys_module_action"
              :params="editData.actionParam"
              :newdata="{'name': '', path: form.path}"
            >
              <template slot="head">
                <colgroup>
                  <col width="200" />
                  <col />
                  <col width="60" />
                </colgroup>
                <thead>
                  <tr class="tr gray">
                    <th>名称</th>
                    <th>API权限</th>
                    <th>-</th>
                  </tr>
                </thead>
              </template>
              <template slot="item" slot-scope="props">
                <tr>
                  <td>
                    <el-input size="mini" v-model="props.item.name"></el-input>
                  </td>
                  <td>
                    <el-input size="mini" v-model="props.item.path"></el-input>
                  </td>
                  <td>
                    <el-button
                      size="mini"
                      icon="el-icon-close"
                      type="default"
                      circle
                      @click="$refs.actionlist.del(props.index)"
                    ></el-button>
                  </td>
                </tr>
              </template>
            </v-editmore>
          </div>
          <div class="dis5"></div>
        </div>
      </el-dialog>
      <!-- 编辑结束 -->
      <!-- 详情开始 -->
      <v-baseinfo v-model="drawer.show" :name="drawer.name">
        <div class="wrapper-content" v-if="drawer.data" slot="sys/module">
          <div class="content-item">
            <span class="label">上级模块：</span>
            <span class="value">{{drawer.data.parent.name || '无'}}</span>
          </div>
          <div class="content-item">
            <span class="label">模块名称：</span>
            <span class="value">{{drawer.data.data.name || '-'}}</span>
          </div>
          <div class="content-item">
            <span class="label">路由：</span>
            <span class="value">{{drawer.data.data.path || '-'}}</span>
          </div>
          <div class="content-item">
            <span class="label">图标：</span>
            <span class="value" v-if="drawer.data.data.icon">
              <i :class="drawer.data.data.icon" style="position:unset;font-size:16px"></i>
            </span>
            <span v-else>-</span>
          </div>
          <div class="content-item">
            <span class="label">排序：</span>
            <span class="value">{{drawer.data.data.sort || '-'}}</span>
          </div>
          <div class="content-item">
            <span class="label">状态：</span>
            <span class="value font-green" v-if="drawer.data.data.status">显示</span>
            <span class="value font-red" v-else>隐藏</span>
          </div>
          <div
            class="content-item"
            style="display: flex;align-items: center;"
            v-if="drawer.data.action"
          >
            <span class="label">配置项：</span>
            <span class="table">
              <table>
                <thead>
                  <tr>
                    <td>名称</td>
                    <td>API权限</td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(val,inx) in drawer.data.action" :key="inx">
                    <td>{{ val.name || '-' }}</td>
                    <td>{{ val.path || '-' }}</td>
                  </tr>
                </tbody>
              </table>
            </span>
          </div>
        </div>
      </v-baseinfo>
      <!-- 详情结束 -->
    </div>
  </div>
</template>
<script>
import { cacheConfig, cacheUnion } from "@cache";
export default {
  data() {
    return {
      form: {
        id: 0,
        name: "",
        type: "",
        status: 1,
        sort: 0,
        icon: "",
        pid: 0,
        path: ""
      },
      editData: {
        status: false,
        title: "新增/修改模块",
        id: 0,
        cate: [],
        actionParam: { id: 0 }
      },
      rules: {
        name: [
          { required: true, message: "请输入模块名称", trigger: "blur" },
          { min: 1, message: "模板名称不能为空", trigger: "blur" }
        ]
      },
      params: {
        type: "sys",
        union_id: "SYS",
        hidePage: true
      },
      menu: [
        { key: "sys", value: "系统" },
        { key: "console", value: "控制台" }
      ],
      modules: [],
      drawer: {
        show: false,
        data: null,
        name: "模块"
      }
    };
  },
  watch: {
    "drawer.show": {
      handler(newV) {
        if (!newV) {
          this.drawer.data = null;
        }
      }
    }
  },
  methods: {
    edit(item) {
      this.editData.status = true;
      this.editData.id = item.id || 0;
      this.editData.cate = this.$refs.list.getData().list;
      this.editData.actionParam.id = this.editData.id;
      this.form.id = this.editData.id;
      this.form.type = this.params.type;
      this.form.union_id = this.params.union_id || 0;
      this.form.name = item.name || "";
      this.form.status = item.status || 0;
      this.form.sort = item.sort || 0;
      this.form.icon = item.icon || "";
      this.form.pid = item.pid || 0;
      this.form.path = item.path || "";
    },
    save() {
      this.form.sort = parseInt(this.form.sort);
      this.form.status = parseInt(this.form.status);
      let that = this;
      that.$refs["form"].validate(valid => {
        if (valid) {
          let url =
            that.editData.id > 0
              ? "system.edit_sys_module"
              : "system.add_sys_module";
          that.$api.jpost(url, that.form).then(res => {
            if (res.status === 1) {
              that.$success(res.msg);
              that.$refs.list.fetchData();
              that.editData.status = false;
            } else {
              that.$error(res.msg);
            }
          });
        }
      });
    },
    // 刷新缓存
    refresh() {
      let { type, union_id } = this.params;
      this.$api
        .get("system.del_sys_module_cache", { type, union_id })
        .then(res => {
          if (res.status === 1) {
            this.$success(res.msg);
          }
        });
    },
    // 获取模型类型
    getCates() {
      this.modules = cacheConfig.load("YY:config").module;
    },
    selectCate(val) {
      this.params.type = val;
    },
    del(row) {
      let that = this;
      that
        .$confirm("此操作会将该彻底删除，不可恢复, 是否继续?", "删除提醒")
        .then(() => {
          that.$api
            .jpost("system.delete_sys_module", {
              id: row.id
            })
            .then(res => {
              if (res.status === 1) {
                that.$success(res.msg);
                that.$refs.list.fetchData();
              } else {
                that.$error(res.msg);
              }
            });
        })
        .catch(() => {});
    },
    setBaseInfo(item) {
      this.$api
        .get("system.get_sys_module_detail", { id: item.id })
        .then(res => {
          this.drawer.data = res.data;
        });
      this.drawer.show = true;
    }
  },
  mounted() {
    this.getCates();
    this.menu = cacheUnion.load("YY:union");
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  width: 290px;
}
</style>
